稍微探討 Higher-Order Component

React 的 Higher-Order Component（HOC）是一種高階概念，但在實際上也並不是很複雜，他用於將多項功能中的共同點抽出並加以共用，在設計上本質其實只是一個可以帶入多項參數的函式而已。

他的重點在於重用性、邏輯分離、程式重構，基本上其實就是有些共用的邏輯抽象層，如使用者

常見的結構

一個 HOC 是一個函式，它接受一個組件作為參數，並返回一個新的組件。通常，這個函式的名稱以 with 開頭，例如 withAuth 或 withData。

const withLogger = (WrappedComponent) => {
  class WithLogger extends React.Component {
    // 添加日誌記錄邏輯
    render() {
      return <WrappedComponent {...this.props} />;
    }
  }
  return WithLogger;
};

使用 HOC

要使用 HOC，只需將要包裝的組件傳遞給 HOC 韓式，然後使用返回的新組件就可以了。

const EnhancedComponent = withLogger(MyComponent);

屬性代理

HOC 可以通過屬性代理向包裝的組件傳遞屬性。這允許 HOC 在渲染過程中干預組件的行為。

const withLogger = (WrappedComponent) => {
  return class WithLogger extends React.Component {
    render() {
      return <WrappedComponent log={console.log} {...this.props} />;
    }
  };
};

HOC 也可以用於將狀態提升到共用邏輯層來處理。例如可以建立一個管理表單狀態的 HOC，並且用這個 HOC 包覆多個表單組件，以實現資料共享，但是其實要實現這個項目，也不一定需要使用到 HOC 的概念，我們在 React 中還有其他很多的方法能進行處理。

實際上 HOC 的撰寫較多會寫 Class base 的組件，來處理共用邏輯層的部分，因此如果不習慣這樣的寫法的話，也可以使用 useContext 來得到相同的目的，並沒有一定要使用 HOC 的必要性。